import React, { useState, useEffect } from 'react';

export const App = () => {
  // 控制子组件消失和显示
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <h2>父组件</h2>
      <button onClick={() => setVisible(!visible)}>消失/回来</button>
      <hr />
      {visible ? <Counter /> : null}
    </div>
  );
};

const Counter = () => {
  // 执行时机2：下一次 effect 函数执行的时候（用于清除上一次的副作用）
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 组件加载完毕，effect 执行
    console.log('组件加载完毕，effect 执行');
    return () => {
      // 组件卸载时，执行清理函数
      // 下一次 effect 函数执行的时候（用于清除上一次的副作用）
      console.log('组件更新时，执行清理函数');
    };
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>count+1</button>
    </div>
  );

  // 执行时机1、卸载时
  //   useEffect(() => {
  //     console.log('第一次');
  //     // const handleResize = () => {
  //     //   console.log('window resize');
  //     // };
  //     // // 这个要在组件销毁时去remove掉
  //     // window.addEventListener('resize', handleResize);
  //     // 添加计时器
  //     let timerId = setInterval(() => {
  //       console.log('计时器');
  //     }, 1000);
  //     // 返回值定义一个函数，这个函数就是清理函数，会在组件卸载的时候执行
  //     return () => {
  //       console.log('组件卸载时执行清理函数');
  //       clearInterval(timerId);
  //     };
  //   }, []);
  //   return <div>Counter</div>;
};

export default App;
